import React, { useState, useEffect } from "react";
import { Table, Popconfirm, Button, message } from "antd";
import { PageHeaderWrapper } from "@ant-design/pro-layout";
import AddOrEditModal from "./components/addOrEdit";
import { connect } from "dva";
import { defaultPagination } from "@/utils/enum";
import { useSetState } from "ahooks";
import styles from "./index.less";

const AccountManagement = ({ dispatch, location, companyAccountList }) => {
  const [modalVisible, setModalVisible] = useState(false);
  const [rowData, setRowData] = useState();
  const [state, setState] = useSetState({
    page: 1,
    size: 10
  });
  const { companyId } = location.state;

  //获取公司部门列表
  const searchCompanyAccountList = () => {
    const { page, size } = state;
    dispatch({
      type: "companyUserManage/searchCompanyAccountList",
      payload: { companyId, page, size }
    });
  };
  useEffect(() => {
    searchCompanyAccountList();
  }, [state.page, state.size]);

  const remove = async id => {
    const next = await dispatch({
      type: "companyUserManage/deleteCompanyAccount",
      payload: { id }
    });
    if (!next) return;
    message.success("删除成功");
    searchCompanyAccountList();
  };

  const handleTableChange = async (page, size) => {
    setState({ page, size });
  };

  const create = async params => {
    // 添加企业部门
    console.log(params)
    const next = await dispatch({
      type: "companyUserManage/addCompanyAccount",
      payload: { ...params, companyId }
    });
    if (!next) return;
    setModalVisible(false);
    message.success("新增成功");
    searchCompanyAccountList();
  };

  const edit = async params => {
    // 编辑企业部门
    const next = await dispatch({
      type: "companyUserManage/editCompanyAccount",
      payload: params
    });
    if (!next) return;
    setModalVisible(false);
    message.success("新增成功");
    searchCompanyAccountList();
  };

  const pagination = {
    ...defaultPagination,
    total: companyAccountList.totalElements,
    showTotal: total => `共${total}条`,
    current: state.page,
    onChange: handleTableChange,
    onShowSizeChange: handleTableChange,
    pageSize: state.size
  };

  const columns = [
    {
      title: "账号名称",
      dataIndex: "mobile"
    },
    {
      title: "部门",
      dataIndex: "companyDepartmentName"
    },
    {
      title: "操作",
      align: "center",
      render: (text, record) => (
        <span className={styles.operation}>
          <a
            onClick={() => {
              setModalVisible(true);
              setRowData(record);
            }}
          >
            编辑
          </a>
          <Popconfirm
            title={`确认删除企业用户？`}
            onConfirm={async () => {
              await remove(record.id);
            }}
            // onCancel={this.cancel}
            okText="确定"
            cancelText="取消"
          >
            <a href="#">删除</a>
          </Popconfirm>
        </span>
      )
    }
  ];
  return (
    <PageHeaderWrapper className={styles.container}>
      <header>
        <Button
          type="primary"
          onClick={() => {
            setModalVisible(true);
            setRowData();
          }}
        >
          新增账号
        </Button>
      </header>
      <Table
        className="wrapperClass"
        rowKey="key"
        dataSource={companyAccountList.content}
        columns={columns}
        pagination={pagination}
      />
      <AddOrEditModal
        title={rowData ? "编辑账号" : "新增账号"}
        visible={modalVisible}
        setVisible={setModalVisible}
        onSubmit={rowData ? edit : create}
        value={rowData}
        companyId={companyId}
      />
    </PageHeaderWrapper>
  );
};

export default connect(({ companyUserManage }) => ({
  companyAccountList: companyUserManage.companyAccountList
}))(AccountManagement);
